<template>
    <div>
        <div class="left">
            <div class="card"> 
                <div class="card_title"><i></i>
                <div>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '预警统计'}" @click="changeSubTitle('预警统计')">预警统计</span>
                    <span style="color: #00FFFF;margin: 0 6px">|</span>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '设备监控'}" @click="changeSubTitle('设备监控')">设备监控</span>
                </div>
                <i class="more_icon"></i></div> 
            </div>
            <div class="card mar14"> 
                <div class="card_title"><i></i>{{value}}台站监测预警总览<i class="more_icon"></i></div>
                <div class="card_body">
                    <div class="flex top_card">
                        <img src="~@static/img/Group_3652.png" alt="">
                        <div>
                            <p class="data_text"><span>10000</span><span>条</span></p>
                            <p>总预警数量</p>
                        </div>
                    </div>
                    <div class="flex bottom_card">
                        <div class="flex top_card" v-for="(item,index) in card1BottomList" :key="index">
                            <img :src="item.img" alt="">
                            <div>
                                <p>{{ item.name }}</p>
                                <p><span>{{ item.number }}</span><span>{{ item.unit }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mar14 left3_cell">
                <div class="card_title"><i></i>{{value}}监测站数据处理动态</div>
                <div id="left3Bar"></div>
            </div>
            <div class="card mar14">
                <div class="card_title"><i></i>{{value}}监测数据处理概览</div>
                <div class="left_card3_menu">
                    <div v-for="(item,index) in monitoringData" :key="index" :class="{'active_bgColor': JCdataActive === item}" @click="changeJcData(item)"><span class="f_color">{{ item }}</span></div>
                </div>
                <div class="flex">
                    <div id="left3Pie"></div>
                    <div>
                        <div style="margin-bottom: 14px;">
                            <span class="icon_z" :style="{'--background': '#DEB755'}"></span>
                            <span style="color: #fff">已处理</span> 
                            <span style="color:#58C6E1">800条</span>
                        </div>
                        <div>
                            <span class="icon_z" :style="{'--background': '#00CCCC'}"></span>
                            <span style="color: #fff">未处理</span> 
                            <span style="color:#58C6E1">200条</span>
                        </div>
                    </div>
                </div>
                <div class="cardl3_body">
                    <div class="title">盐碱地抽检总数<span>5000个</span></div>
                    <div class="flex">
                        <div class="device_manage" style="padding: 6px 0;"> 
                            <span class="icon_z" :style="{'--background': '#1EE7E7'}"></span>
                            <span>达标数</span> 
                            <p style="color:#58C6E1">4300个</p>
                        </div>
                        <div class="device_manage" style="padding: 6px 0;margin-left: 14px;">
                            <span class="icon_z" :style="{'--background': '#FCE173'}"></span>
                            <span>未达标</span>
                            <p style="color:#58C6E1">70个</p>
                        </div>
                    </div>
                </div>
                <div id="spotCheck"></div>
            </div>
        </div>
        <div class="right">
            <div class="card rCard1" v-if="isNationwide"> 
                <div class="card_title"><i></i>全国盐碱地面积概览<i class="more_icon"></i></div>  
                <div id="right_chart1" ></div> 
            </div>
            <div  class="card card_region1" v-else> 
                <div class="card_title"><i></i>{{value}}盐碱地实时监测数据<i class="more_icon"></i></div> 
                <div>
                    <div class="flex" v-for="item in region1List" :key="item.name">
                        <img :src="item.img" alt="">
                        <div>
                            <p>{{ item.name }}</p>
                            <p>
                                <span>{{ item.number }}</span> 
                                <span>{{ item.unit }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mar14"> 
                <div class="card_title"><i></i>{{value}}盐碱地农作物产量概览<i class="more_icon"></i></div>  
                <div class="flex top7_cell">
                    <span></span>
                    <p>top7 产量</p>
                </div>
                <div id="top7_chart"></div>
            </div>
            <div class="card mar14"  v-if="isNationwide"> 
                <div class="card_title"><i></i>全国试验站监测预警统计</div> 
                <div class="left_card3_menu">
                    <div v-for="(item,index) in monitoringData" :key="index" :class="{'active_bgColor': monitoringActive === item}" @click="changeMonitoringData(item)"><span class="f_color">{{ item }}</span></div>
                </div>
                <div id="right_chart3"></div>
            </div>
            <div class="card mar14 card_region2" v-else> 
                <div class="card_title"><i></i>{{value}}试验站监测预警统计</div> 
                <div class="title">总计<span>500处</span></div>
                <div class="flex">
                    <div class="device_manage" style="padding: 6px 0;"> 
                        <span class="icon_z" :style="{'--background': '#006CED'}"></span>
                        <span>干旱</span> 
                        <p style="color:#58C6E1">220个</p>
                    </div>
                    <div class="device_manage" style="padding: 6px 0;margin-left: 14px;">
                        <span class="icon_z" :style="{'--background': '#1EE7E7'}"></span>
                        <span>pH高</span>
                        <p style="color:#58C6E1">70个</p>
                    </div>
                    <div class="device_manage" style="padding: 6px 0;margin-left: 14px;">
                        <span class="icon_z" :style="{'--background': '#1EE7E7'}"></span>
                        <span>含盐量高</span>
                        <p style="color:#58C6E1">120个</p>
                    </div>
                </div>
                <div id="region_chart3"></div>
                <div class="table_cell">
                    <table border="0">
                        <thead>
                            <tr class="table_title"> 
                                <th>事件名称</th> 
                                <th>事件描述</th> 
                                <th>处理情况</th> 
                            </tr>
                        </thead>
                        <tbody class="custom_tbody table_tbody">
                            <tr class="tr1" v-for="(data, i) in tableList" :key="i"> 
                                <td>{{ data.name }}</td> 
                                <td>{{ data.desc }}</td> 
                                <td>{{ data.status }}</td> 
                            </tr>
                        </tbody>
                    </table>
                </div>
                <el-pagination class="pagination" background layout="prev, pager, next" :total="50"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{ 
            isNationwide: true,
            currentIndex: "预警统计",
            monitoringData: ["全部", "地下水位数据", "土壤数据", "气象数据", "生物数据"],
            monitoringActive: "全部",
            JCdataActive: "全部",
            card1BottomList: [
                { img: require("../../static/img/样地数量.png"), name: "已处理", number: "9998", unit: "条" }, 
                { img: require("../../static/img/数据总量.png"), name: "未处理", number: "88", unit: "条" },  
            ],
            value: "全国",
            chart1: null,
            chart2: null,
            region1List: [
                { img: require("../../static/img/region/盐分.png"), name: "土壤盐分", number: "0.9", unit: "%" },
                { img: require("../../static/img/region/水分.png"), name: "土壤水分含量", number: "20", unit: "%" },
                { img: require("../../static/img/region/PH.png"), name: "土壤PH", number: "8", unit: "" },
                { img: require("../../static/img/region/温度.png"), name: "温度", number: "32", unit: "℃" },
                { img: require("../../static/img/region/风力.png"), name: "风力", number: "二级", unit: "" },
                { img: require("../../static/img/region/风向.png"), name: "风向", number: "西南", unit: "" },
            ],
            tableList: [
                { name: "A干旱", desc: "土地干旱", status: "已处理" },
                { name: "A干旱", desc: "土地干旱", status: "未处理" },
                { name: "A干旱", desc: "土地干旱", status: "已处理" },
                { name: "B pH高", desc: "土壤的pH过高", status: "已处理" },
                { name: "B pH高", desc: "土壤的pH过高", status: "已处理" },
            ],
        }
    },

    mounted() {
        if(this.$parent.value == "全国"){
            this.isNationwide = true;
        }else{ 
            this.isNationwide = false;
        }
        this.value = this.$parent.value;
        
        this.$bus.$on("change-select",(res)=>{
            this.changeSelect(res);
        })
        let spotCheckData = [
            { name: "达标数", color: "rgba(0,146,246", value: "430" },
            { name: "未达标", color: "rgba(255,209,92", value: "70" },  
        ]; 
        this.initBar();
        this.initSpotCheck(spotCheckData,"spotCheck");
        this.initPie();
        this.initleft3Bar();
        this.initRight3Bar();
        this.initRight1Bar(); 
    },

    methods: { 
        changeSelect(val){
            let _this = this; 
            
            if(_this.$route.path === "/Warning"){
                if(val == "全国"){ 
                    this.isNationwide = true; 
                }else{
                    this.isNationwide = false;
                    let chart3Data = [
                        { name: "干旱", color: "rgba(0,108,237", value: "220" },
                        { name: "pH高", color: "rgba(30,231,231", value: "160" },  
                        { name: "含盐量高", color: "rgba(255,209,92", value: "120" },  
                    ];
                    _this.$nextTick(()=>{ 
                        this.initSpotCheck(chart3Data,"region_chart3");
                    })
                }
                this.value = val;     
            }
            
        },
        initRight1Bar(){
            let _this = this;
            var chartDom = document.getElementById("right_chart1");
            _this.chart1 = _this.$echarts.init(chartDom);
            _this.chart1.clear();
            _this.chart1.resize(); 
            let data = [
                {name: "2013年", color: "rgba(222, 183, 85", data: [120, 112, 121, 134, 120, 100, 110, 125, 145, 122, 135, 122]},
                {name: "2016年", color: "rgba(0, 204, 204", data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]},
                {name: "2019年", color: "rgba(152, 212, 91", data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]},
                {name: "2022年", color: "rgba(31, 147, 255", data: [110, 172, 145, 135, 182, 141, 174, 160, 140, 130, 145, 172]},
            ]
            let legendData = [];
            let seriesData = [];
            data.forEach(item => {
                legendData.push(item.name);
                seriesData.push({
                    name: item.name,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: `${item.color}, 0.3)`
                            }, {
                                offset: 0.8,
                                color: `${item.color}, 0)`
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: `${item.color}, 1)`,
                            borderColor: `${item.color}, 0.27)`,
                            borderWidth: 12

                        }
                    },
                    data: item.data
                })
            });
            var option = { 
                tooltip: { 
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                legend: {
                    icon: 'rect',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 13,
                    data: legendData,
                    right: '4%',
                    textStyle: {
                        fontSize: 12,
                        color: '#F1F1F3'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#B4C0CC'
                        },
                        symbol: ['none', 'arrow']
                    },
                    axisLabel: { 
                        interval: 0,
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月 ', '11月', '12月 ' ],
                }],
                yAxis: [{
                    type: 'value',
                    name: '面积(K㎡)',
                    axisTick: {
                        show: false
                    },
                    axisLine: { 
                        lineStyle: {
                            color: '#B4C0CC'
                        },
                        symbol: ['none', 'arrow']
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#57617B',
                            type: 'dashed'
                        }
                    }
                }],
                series: seriesData
            };
            _this.chart1.setOption(option);
        },
        initRight3Bar(){
            let _this = this;
            var chartDom = document.getElementById("right_chart3");
            _this.chart2 = _this.$echarts.init(chartDom);
            _this.chart2.clear();
            _this.chart2.resize(); 
            var option = { 
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                },
                grid: {
                    top: "26%",
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    axisLabel: { 
                        interval: 0,
                        textStyle: {
                            fontSize: 12,
                            color: '#B4C0CC',
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月 ', '11月', '12月 ' ],
                }],
                yAxis: [{
                    type: 'value',
                    name: '单位（条）',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false, 
                        lineStyle: {
                            color: '#B4C0CC'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                            color: '#B4C0CC',
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#57617B',
                            type: 'dashed'
                        }
                    },
                    min: 0,
                    max: 100
                }],
                series: [{
                    name: '',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 3
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(17,133,240, 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(17,133,240, 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                itemStyle: {
                            normal: { 
                                color: "#0783FA"
                            },
                            emphasis: {
                            color: 'rgb(17,133,240)',
                            borderColor: 'rgba(17,133,240,0.2)',
                            extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                            borderWidth: 10
                        }
                        },
                    data: [38,56,36,42,37,54,42,48,34,42,32,38]
                }]
            };
            _this.chart2.setOption(option);
        },
        initleft3Bar(){
            let _this = this;
            var chartDom = document.getElementById("left3Bar");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            var option = { 
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // legend: {
                //     data: [ '已处理', '未处理'],
                //     align: 'right',
                //     right: 10,
                //     textStyle: {
                //         color: "#fff"
                //     },
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     itemGap: 35
                // },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '0%',
                    top: "6%",
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月 ', '11月', '12月 ' ],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#35414D",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        // rotate: 90, 
                        padding: [0, 0, 0, -10],
                        interval: 0,
                        textStyle: {
                            color: "#B4C0CC",    
                            fontSize: 12,
                            align: "left"
                        }
                    },
                }],
                yAxis: [{
                    type: 'value', 
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#B4C0CC",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#35414D",
                        }
                    }
                }],
                series: [ {
                    name: '已处理',
                    type: 'bar',
                    data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46,84,68],
                    barWidth: 8,
                    barGap: 0.2,
                    itemStyle: {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0783FA'
                            }, {
                                offset: 1,
                                color: '#0783FA00'
                            }]),
                            opacity: 1,
                        }
                    }
                }, {
                    name: '未处理',
                    type: 'bar',
                    data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86,68,93],
                    barWidth: 8,
                    barGap: 0.2,
                    itemStyle: {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#26BCFF'
                            }, {
                                offset: 1,
                                color: '#26BCFF00'
                            }]),
                            opacity: 1,
                        }
                    }
                }]
            };
            chart.setOption(option);
        },
        initPie(){
            let _this = this;
            var chartDom = document.getElementById("left3Pie");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            let angle = 0; //角度，用来做简单的动画效果的
            let value = 80;
            var timerId;
            var option = { 
                title: {
                    text: '{a|' + value + '}{c|%}',
                    subtext: "处理率",
                    x: 'center',
                    y: '30%',
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 16,
                                color: '#29EEF3'
                            },

                            c: {
                                fontSize: 12,
                                color: '#ffffff',
                                // padding: [5,0]
                            }
                        }
                    }, 
                    subtextStyle: {
                        fontSize: 14,
                        color: '#ffffff',
                        textStyle: {
                        color: "#fff"
                        },
                        itemGap: 20
                    }
                },  

                series: [
                    // 紫色
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 1,
                                    startAngle: (0 + angle) * Math.PI / 180,
                                    endAngle: (90 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#8383FA",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, 
                     //紫点
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 1;
                            let point = getCirlPoint(x0, y0, r, (90 + angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#8450F9", //绿
                                    fill: "#8450F9"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    // 蓝色 
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 1,
                                    startAngle: (180 + angle) * Math.PI / 180,
                                    endAngle: (270 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#4386FA",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5", // 蓝色
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 1;
                            let point = getCirlPoint(x0, y0, r, (180 + angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#4386FA", //绿
                                    fill: "#4386FA"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },

                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88,
                                    startAngle: (270 + -angle) * Math.PI / 180,
                                    endAngle: (40 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    // 橘色

                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88,
                                    startAngle: (90 + -angle) * Math.PI / 180,
                                    endAngle: (220 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#FF8E89",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88;
                            let point = getCirlPoint(x0, y0, r, (90 + -angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#FF8E89", //粉
                                    fill: "#FF8E89"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, 
                    {
                        name: "ring5", //绿点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.88;
                            let point = getCirlPoint(x0, y0, r, (270 + -angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB", //绿
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, 
                    {
                        name: '吃猪肉频率',
                        type: 'pie',
                        radius: ['80%', '62%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                    offset: 0,
                                                    color: '#A098FC' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.3,
                                                    color: '#4386FA' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.6,
                                                    color: '#4FADFD' // 0% 处的颜色
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: '#0CD3DB' // 100% 处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: '#646CF9' // 100% 处的颜色
                                                }
                                            ]
                                        },
                                    }
                                }
                            },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#173164"
                                    }
                                }
                            }
                        ]
                    },
                    {
                        name: '吃猪肉频率',
                        type: 'pie',
                        radius: ['52%', '48%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 270,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#00EDF3' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#646CF9' // 100% 处的颜色
                                            }]
                                        },
                                    }
                                }
                            },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#173164"
                                    }
                                }
                            }
                        ]
                    },

                ]
            };

            //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
            function getCirlPoint(x0, y0, r, angle) {
                let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                return {
                    x: x1,
                    y: y1
                }
            }

            function draw() {
                angle = angle + 3
                chart.setOption(option, true)
                //window.requestAnimationFrame(draw);
            }
            if (timerId) {
                clearInterval(timerId);
            }
            timerId = setInterval(function() {
                //用setInterval做动画感觉有问题
                draw()
            }, 100);
            chart.setOption(option);
        },
        initSpotCheck(data, id){
            let _this = this;
            var chartDom = document.getElementById(id);
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            let seriesData = [];
            let sourceData = {
                status: '',
            }; 
            data.forEach((item,index)=>{ 
                seriesData.push({
                    name: item.name,
                    type: 'bar',
                    stack: 'total',
                    label: { show: false }, 
                    emphasis: { focus: 'series' }, 
                    barWidth: 20,
                    itemStyle: {
                        label: { show: true, },
                        labelLine: { show: false, },
                        color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: `${item.color},0.2)` },
                            { offset: 1, color: `${item.color}, 1)` },
                        ]),
                        borderColor: `${item.color},0.7)`,
                        shadowBlur: 16,
                        shadowColor: `${item.color}, 1)` ,
                    },
                });

                sourceData[`value${index+1}`] = item.value;
            }) 
            
            var option = { 
                grid: {
                    top: '0',
                    left: '-10%',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                xAxis: {
                    show: false, 
                },
                yAxis: {
                    show: false,
                    type: 'category', 
                    axisLabel: {
                        color: 'rgba(255,255,255,0.8)',
                    },
                },
                series: seriesData,
                dataset: {
                    source: [sourceData],
                },
            };
            chart.setOption(option);
        },
        initBar(){
            let _this = this;
            var chartDom = document.getElementById("top7_chart");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            let data = [
                { name: '荞麦', value: (Math.random() * 100).toFixed(0), sum: 100 },
                { name: '花生', value: (Math.random() * 100).toFixed(0), sum: 100 },
                { name: '油菜', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
                { name: '大豆', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
                { name: '玉米', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
                { name: '小麦', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
                { name: '水稻', value: (Math.random() * 100).toFixed(0), sum: 100 }
            ];
            let getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }; 
            let color = ['#960303', '#DF0B31', '#EC0932','#FD2E00', '#F9B857', '#36EAAF', '#36EAAF'];
            data = data.sort((a,b) => {
                return b.value - a.value
            });
            var option = {
                grid: {
                    top: '2%',
                    bottom: -15,
                    right: 30,
                    left: -8,
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#fff',
                        align: 'left',
                        margin: 40,
                        fontSize: 13, 
                    },
                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    zlevel: 1,
                    yAxisIndex: 0,
                    data: data,
                    barWidth: 10,
                    itemStyle: {
                        color: (val) => {
                            return new _this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                { offset: 0, color: "#fff"},
                                { offset: 1, color: color[val.dataIndex] },
                            ])
                        },
                    }
                },
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 10,
                        barGap: '-100%', 
                        data: [100,100,100,100,100,100,100],
                        itemStyle: {
                            normal: {
                                color: '#373F4F',
                                fontSize: 10,
                            },
                        },
                    }]
            };
            chart.setOption(option);
        }, 
        changeJcData(item){
            this.JCdataActive = item;
        },
        changeMonitoringData(item){
            this.monitoringActive = item;
        },
        changeSubTitle(data){
            this.currentIndex = data;
            if(data === '设备监控'){
                this.$router.push("/monitorWarning");
                this.$bus.$emit("send-Message","P3.2");
            }else{ 
                this.$bus.$emit("send-Message","P3.1");
            }
        },
    },

    watch: {
        isNationwide(newVal, oldVal){
            let _this = this;
            // this.initBar(); 
            
            if(!newVal){
                this.chart1.dispose();
                this.chart2.dispose();
            }else{
                _this.$nextTick(() => {
                    _this.initRight1Bar();
                    _this.initRight3Bar();
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss"; 


thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    text-align: center;
    margin-bottom: 4px;
}
thead {  
    font-size: 12px;
    th{
        font-weight: normal !important;
    }
}

table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    color: #fff;
    tr{
        height: 27px;
        background-color: rgba($color: #ffffff, $alpha: 0.19); 
    }
    .table_title{
        background-color: rgba($color: #ffffff, $alpha: 0.19);
        font-weight: 100;
        height: 40px; 
    }
    .tr1{
        // background-color: #333C4C;
        cursor: pointer;
        font-size: 12px; 
    }
    .tr2{
        cursor: pointer;
        // background-color: rgba(34,41,55,0.85);
        font-size: 12px;
    }
}

.table_cell{
    height: calc(100% - 172px);
    overflow-y: auto;
    position: relative;
    top: -10px;
    padding: 0 14px;
}

.pagination{
    text-align: center;
    
    /deep/ button, /deep/ .number{
        max-width: 20px !important;
        min-width: 20px !important;
        height: 24px;
        line-height: 24px;
        color: #fff !important;
    }
    /deep/ button{
        background-color:#707B85 !important;
    }
    /deep/ .number{
        background-color: #707B85 !important;
    }
    /deep/ .active{
        background-color: #17ECFB !important;
        color: #0C6D7F !important;
    }
}
#region_chart3{
    height: 30px;
    padding: 0 14px;
}
.card_region2{
    height: calc(100% - 514px);
    .title{
        margin-left: 14px;
    }
    >div:nth-child(3){
        margin: 0 14px; 
        .device_manage{
            margin-right: 30px;
        }
    }
}
.card_region1{
    >div:nth-child(2){
        padding: 0 14px 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        >div{
            width: calc(50% - 8px); 
            margin-top: 10px;
            img{
                width: 52px;
                height: 52px;
            }
            >div{
                margin-left: 0.8vw; 
                >p{
                    color: #fff;
                    font-size: 14px;
                    &:nth-child(2)>span:nth-child(1){
                        color: #2FFFFF;
                        font-size: 18px;
                        font-family: "siyuanHeavy";
                    }
                }
            }
            
        }
    }
}
.rCard1{
    height: calc(100% - 570px);
    >div:nth-child(2){
        height: calc(100% - 30px); 
    }
}
#right_chart3{
    height: 150px;
}
.left3_cell{
    height: calc(100% - 680px);
    >div:nth-child(2){
        height: calc(100% - 30px); 
    }
}
#left3Pie{
    height: 120px;
    width: 50%;
}
#spotCheck{
    height: 30px; 
    padding: 0 16px;
}
.cardl3_body{ 
    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
}
.title{
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-top: 6px;
    >span{
        color: #E1B000;
        margin-left: 14px;
    }
}
.device_manage{
    font-size: 14px;
    color: #FFFFFF;
    padding: 0 12px; 
    >div{
        margin-right: 14px;
    }
    
    >p{
        text-align: right;
        color: #00FFD4 !important;
    }
} 
.icon_z{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--background);
}
.b_a_color{
    color: #1FD7FF;
}
.mar14{
    margin-top: 14px;
}

.left_card3_menu{
    padding: 10px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: repeat(2, auto);  
    gap: 6px 10px; 
    >div{ 
        height: 32px;
        background-color: #2D4A6F80;
        border-radius: 64px;
        border: 1px solid #FFFFFF10; 
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        cursor: pointer;
        &:hover{
            background-color: #4181D1 !important;
        }
    }
    .active_bgColor{
        background-color: #4181D1 !important;
    }
    .f_color{ 
        background-image: linear-gradient(to bottom, #ffffff, 90%, #C8F2FE);  
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
        color: transparent; 
    }
} 
.top7_cell{
    padding: 0 20px;
    span{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: linear-gradient(to right, #fff, #F63A3A);
        margin-right: 14px;
    }
    p{
        color: #fff;
        font-weight: bold;
        font-size: 16px;
    }
}
#top7_chart{
    height: 140px;
}
.card_body{
    padding: 10px 24px;
}
.top_card{ 
    >img{
        width: 86px;
        height: 78px;
    }
    >div{
        margin-left: 16px;
        >p{
            color: #fff;
            
        }
    }
}

.data_text{
    >span{
        text-shadow: 0 0 4px #29E3FC92;
    }
    >span:nth-child(1){
        font-size: 32px;
    }
    >span:nth-child(2){
        font-size: 14px;
    }
}
.bottom_card{
    flex-wrap: wrap;
    >div{
        width: 50%;
        margin-top: 10px;
    }
    .top_card{
        >img{
            width: 50px;
            height: 50px; 
        }
        >div{
            >p:nth-child(2){
                >span:nth-child(1){
                    font-size: 22px;
                    margin-right: 10px;
                    font-family: "siyuanHeavy";
                }
                >span:nth-child(2){
                    color: #FFFFFF64;
                    font-size: 12px;
                }
            }
        }
    }
}

</style>